<template>
  <basic-crud
    :option="option"
    ref="basicCrudRef"
    :apiAddParams="apiAddParams"
    :before-close="handleBeforeClose"
  >
    <template #menu="{ row }">
      <el-button link type="primary" @click="handleAddSon(row)" icon="Plus"
        >新增下级</el-button
      >
    </template>
  </basic-crud>
</template>

<script setup>
import { reactive } from 'vue'

const option = {
  viewBtn: true,
  menuWidth: 320,
  isTableTree: true,
  addBtn: true,
  rowKey: 'id',
  column: [
    {
      label: '编号',
      propType: 'String',
      prop: 'code',
      sort: true,
      search: true,
      width: 120,
      rules: [{ required: true, message: '编号不能为空' }],
    },
    {
      label: '名称',
      propType: 'String',
      prop: 'name',
      search: true,
      rules: [{ required: true, message: '名称不能为空' }],
      sort: true,
      width: 150,
    },
    {
      label: '排序号',
      propType: 'Integer',
      prop: 'orderNum',
      step: 10,
      type: 'number',
      width: 80,
    },
    {
      label: '部门主管领导',
      prop: 'deptLeaderName', //用于展示的字段，一般为参照的名称
      component: 'BasicCrudTableSelect',
      dataType: 'user', //表示使用组件自定义的内部参照
      comProps: {
        saveFieldMap: { deptLeaderName: 'name', deptLeaderId: 'id' },
      },
      minWidth: 120,
    },
    {
      label: '部门类型',
      prop: 'deptType',
      type: 'select',
      dicData: [
        {
          label: '公司',
          value: 'org'
        },
        {
          label: '部门',
          value: 'dept'
        },
        {
          label: '班组',
          value: 'group'
        },
      ],
      width: 150,
    },
    {
      label: '地址',
      propType: 'String',
      prop: 'address',
      sort: true,
      width: 150,
    },
    {
      label: '联系电话',
      propType: 'String',
      prop: 'tel',
      sort: true,
      width: 150,
    },
    {
      label: '状态',
      prop: 'status',
      statusTag: true,
      search: true,
      searchType: 'select',
      display: false,
      dicData: [
        {
          label: '启用',
          value: 'Enabled',
        },
        {
          label: '停用',
          value: 'Disabled',
        },
      ],
      width: 80,
    },
    {
      label: '描述',
      type: 'textarea',
      prop: 'des',
      span: 24,
      minWidth: 100
    },
  ],
}
const apiAddParams = reactive({ parentId: undefined })
const basicCrudRef = ref()
const handleAddSon = (row) => {
  apiAddParams.parentId = row.id
  basicCrudRef.value.crudRef.rowAdd()
}
// 关闭弹窗前清空apiAddParams数据
const handleBeforeClose = (done) => {
  apiAddParams.parentId = undefined
  done()
}
</script>

<style lang="scss" scoped></style>
